<template>
  <div class="goods-list">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="mt_20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model="query"
            @change="onSearch"
            clearable
          >
            <template #append>
              <el-button icon="el-icon-search" @click="onSearch"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button type="primary" @click="goAdd">添加商品</el-button>
        </el-col>
      </el-row>

      <el-table border stripe class="mt_20px" :data="list">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column
          label="商品价格(元)"
          prop="goods_price"
          width="105"
        ></el-table-column>
        <el-table-column
          label="商品重量"
          prop="goods_weight"
          width="80"
        ></el-table-column>
        <el-table-column label="创建时间" width="150">
          <template #default="{ row }">
            {{ row.add_time | df }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default>
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >修改</el-button
            >
            <el-button type="danger" icon="el-icon-delete" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt_20px"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        :current-page="page.current"
        :page-sizes="[1, 2, 5, 10, 15, 20, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GoodsList',
  data() {
    return {
      list: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      query: '',
    };
  },
  methods: {
    onCurrentChange() {},
    onSizeChange() {},
    goAdd() {
      this.$router.push('/goods/add');
    },
    onSearch() {},
  },
  async created() {
    const { data: res } = await this.__apis.goods.list({
      query: this.query,
      pagenum: this.page.current,
      pagesize: this.page.size,
    });
    const { status, msg } = res.meta;
    if (status !== 200) {
      return this.$message.error(msg);
    }
    const { goods, total } = res.data;
    this.list = goods;
    this.page.total = total;
  },
};
</script>
